<script lang="ts" setup>
import useTable from '@/hooks/useTable'
import { TableRowSelection, Image } from '@arco-design/web-vue'
import { get, message, formatEnum } from '@/utils'
const emit = defineEmits(['update:show', 'reset', 'confirm', 'cancel', 'update:list', 'update:id'])
const props = defineProps<{
  show: boolean
  info?: any
  ids?: any[] | string
  type?: 'radio' | 'checkbox'
}>()
console.log(props)

const { formatColumns } = useTable()
const formRef = ref()
const actionRef = ref()
const selectedKeys = ref([] as any[])
const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const list = ref<any[]>([])
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    get(
      {
        url: '/server-social/admin/topic/page',
        data: { size: params.pageSize, ...params },
      },
      ({ data, code }) => {
        list.value = data.records
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const submit = done => {
  if (!selectedKeys.value.length) {
    message({
      type: 'error',
      content: '至少选择一个商户',
    })
    done(false)
    return
  }
  const _list = list.value.filter(f => selectedKeys.value.some(id => f.id == id))
  console.log('🚀 ~ submit ~ selectedKeys:', selectedKeys)
  emit('update:list', _list)
  emit('confirm', selectedKeys.value)
  emit('update:show', false)
  done(true)
}
const columns = formatColumns([
  {
    title: 'ID',
    dataIndex: 'id',
    width: 200,
    hideInSearch: false,
  },

  {
    title: '发布图片',
    dataIndex: 'img',
    width: 100,
    render: ({ record }) => {
      return h(Image, { src: record.img.split(',')[0], width: '40', height: '40' }, '')
    },
  },
  {
    title: '内容',
    dataIndex: 'content',
    width: 200,
    ellipsis: true,
  },
  {
    title: '绑定话题',
    dataIndex: 'tag',
    width: 200,
  },
  {
    title: '点赞量',
    dataIndex: 'likeNum',
    width: 150,
    sorter: true,
  },
  {
    title: '排序值',
    dataIndex: 'sort',
    width: 100,
    sorter: true,
  },

  {
    title: '允许评论',
    dataIndex: 'isComment',
    width: 100,
    valueEnum: {
      0: { text: '否', status: 'Error' },
      1: { text: '是', status: 'Success' },
    },
  },
  {
    title: '是否显示',
    dataIndex: 'isShow',
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 90,
    valueEnum: {
      0: { text: '开启', status: 'Success' },
      1: { text: '关闭', status: 'Error' },
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 200,
  },
  {
    title: '审核备注',
    dataIndex: 'remark',
    width: 200,
  },
])
const rowSelection = computed<TableRowSelection>(() => {
  if (props.type == 'checkbox') {
    return {
      type: 'checkbox',
      showCheckedAll: true,
      onlyCurrent: false,
    }
  } else {
    return {
      type: 'radio',
    }
  }
})
onMounted(() => {
  if (typeof props.ids == 'string') {
    selectedKeys.value = props.ids.split(',')
  } else if (props.ids instanceof Array) {
    selectedKeys.value = props.ids
  }
})
</script>
<template>
  <CModal v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="1200px" title="种草社区列表" @cancel="emit('update:show', false)">
    <a-space direction="vertical" style="width: 100%">
      <ProTable
        :columns="columns"
        :request="request"
        row-key="id"
        :form-ref="ref => (formRef = ref)"
        :pagination="pagination"
        header-title=""
        :scroll="{ x: 1000 }"
        column-resizable
        :bordered="{ cell: true }"
        :action-ref="ref => (actionRef = ref)"
        v-model:selectedKeys="selectedKeys"
        :row-selection="rowSelection"
      >
        <template #option-render="{ dom, reset }">
          <component :is="dom[1]" />
          <component :is="dom[0]" />
        </template>
      </ProTable>
    </a-space>
  </CModal>
</template>
<style lang="less" scoped></style>
